<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts三维散点图</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/resource/echarts-gl-latest/dist/echarts-gl.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
</head>
<body>
<input id="btn" type="button" value="图表删除，重新加载" />
<div id="main" style="width:500px;height:600px;margin: 0 auto;"></div>
</body>
<script>
    // $("#main").remove();
    // var newM = $("<div id='main' style='width: 100%;height:800px; '></div>");
    // newM.appendTo($("body"));
    let data = [];
    addChart(data);
    $("#btn").on("click", function () {
        $("#main").remove();
        var newM = $("<div id='main' style='width: 100%;height:800px; '></div>");
        newM.appendTo($("body"));
        addChart(data);
    });

    function addChart (data) {
        var myChart = echarts.init(document.getElementById('main'));
        // console.log(myChart);

        myChart.setOption({
            tooltip: {},
            xAxis3D: {
                name: "x",
                type: 'value',
//                min: 'dataMin',//获取数据中的最值
//                max: 'dataMax'
            },
            yAxis3D: {
                name: "y",
                type: 'value',
//                min: 'dataMin',
//                max: 'dataMax'
            },
            zAxis3D: {
                name: "z",
                type: 'value',
//                min: 'dataMin',
//                max: 'dataMax'
            },
            grid3D: {
                axisLine: {
                    lineStyle: {
                        color: '#000'//轴线颜色
                    }
                },
                axisPointer: {
                    lineStyle: {
                        color: '#f00'//坐标轴指示线
                    },
                    show: false//不坐标轴指示线
                },
                viewControl: {
//                     autoRotate: true,//旋转展示
//                     projection: 'orthographic'
                    beta: 10
                },
                boxWidth: 200,
                boxHeight: 100,
                boxDepth: 100,
                top: -100
            },

            series: [{
                type: 'scatter3D',
                dimensions: ['a', 'b', 'c'//显示框信息
                ],
//                encode: {
////                    x: [3, 1, 5],      // 表示维度 3、1、5 映射到 x 轴。
////                    y: 2,              // 表示维度 2 映射到 y 轴。
//                    tooltip:['a','c','b'], // 表示维度 3、2、4 会在 tooltip 中显示。
//                    label: 'a'           // 表示 label 使用维度 3。
//                },
                data: data,
                symbolSize: 5,//点的大小
                // symbol: 'triangle',
                itemStyle: {
                    borderWidth: 1,
                    borderColor: 'rgba(255,255,255,0.8)'//边框样式
                },
                emphasis: {
                    itemStyle: {
                        color: '#ccc'//高亮
                    }
                },
                itemStyle: {
                    color: "#f00"
                }
            }],
            backgroundColor: "#fff"
        });
    }
</script>
</html>
